<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>基本使用</title>
    </head>

    <body>
        <button id="btn">点击抽奖</button>
        <script>
            function rand(m, n) {
                return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
            }
            // 点击按钮, 2s 后显示是否中奖.  30% 概率中奖  『1-100』
            // 中奖弹出   恭喜恭喜   显示中奖号码
            // 未中奖弹出  再接再厉   显示数字

            //获取按钮
            let btn = document.querySelector("#btn");

            btn.onclick = function () {
                //使用原生的方式实现
                // setTimeout(() => {
                //     //获取一个从 1 - 100 的随机数
                //     let n = rand(1, 100);
                //     if(n <= 30){
                //         alert('恭喜恭喜, 中奖啦, 您的中奖号码为' + n);
                //     }else{
                //         alert('再接再厉, 您的号码为' + n);
                //     }
                // }, 1000);

                // Promise 形式      解决       拒绝
                let p = new Promise((resolve, reject) => {
                    setTimeout(() => {
                        let n = rand(1, 100);
                        if (n <= 30) {
                            //成功
                            resolve(n);//
                        } else {
                            //失败
                            reject(n);
                        }
                    }, 1000);
                });

                //value 值    reason 原因
                p.then((value) => {
                    alert('恭喜恭喜, 中奖号码为' + value);
                }, (reason) => {
                    alert('再接再厉, 号码为' + reason);
                }); // then 然后
            };
        </script>
    </body>
</html>
